import { useSelector } from "react-redux";
import { RootState } from "../../store";
import "./index.css";

export default function UserList() {
  const user = useSelector((state: RootState) => state.user);

  if (!user.hasSearch) {
    return <div>输入用户名搜索</div>;
  }

  if (user.loading) {
    return <div>loading...</div>;
  }

  if (user.userList.length) {
    return (
      <div className="row">
        {user.userList.map((user) => {
          return (
            <div className="card" key={user.id}>
              <a href={user.html_url} target="_blank" rel="noreferrer">
                <img src={user.avatar_url} alt="" style={{ width: 100 }} />
              </a>
              <p className="card-text">{user.login}</p>
            </div>
          );
        })}
      </div>
    );
  }

  return <div>暂无数据</div>;
}
